<route lang="json5">
{
  style: {
    navigationBarTitleText: '礼堂详情',
  },
}
</route>

<template>
  <view>
    <map
      class="lt-map"
      :longitude="_center.longitude"
      :latitude="_center.latitude"
      :markers="markers"
      :show-location="true"
      :scale="12"
      @markertap="handleMarkertap"
    ></map>
  </view>
</template>

<script setup>
import { DEFAULT_COUNTRY_CENTER } from '@/configs/constant'
import locationIcon from '@/static/icons/location-icon.png'

const props = defineProps({
  // where: {
  //   type: Object,
  //   default: () => {
  //     return {
  //       longitude: 116.39742,
  //       latitude: 39.909,
  //     }
  //   },
  // },
  center: {
    type: String,
    default: DEFAULT_COUNTRY_CENTER,
  },
  markerArray: {
    type: Array,
    default: () => {
      return []
    },
  },
})

const emits = defineEmits(['markertap'])

const _center = computed(() => {
  console.log('props.center', props.center)
  const center = props.center || DEFAULT_COUNTRY_CENTER
  const [longitude, latitude] = center.split(',')
  return {
    longitude,
    latitude,
  }
})

const markers = computed(() => {
  console.log('props.markers', props.markerArray)
  return props.markerArray.map((item) => {
    return {
      ...item,
      // width: 30,
      // height: 30,
      width: 19,
      height: 24,
      iconPath: locationIcon,
    }
  })
})

const handleMarkertap = (event) => {
  console.log('event', event)
  emits('markertap', event)
}
</script>

<style lang="scss" scoped>
.lt-map {
  width: 100%;
  height: 100vh;
}
</style>
